<template>
  <div :style="JSON.parse(schema.style)" :ref="setRef" :class="isOverCurrent ? 'hit' : ''">
    <EmptyTemplate v-if="schemas.length <= 0"></EmptyTemplate>
    <Widget :schema="t" :key="i" v-for="(t,i) in schemas"></Widget>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from "vue";
  import { toRefs } from "@vueuse/core";
  import { useLowCodeStore } from "@/stores";
  import type {schema} from "@/typings";
  import {useDrop, useDrag} from "vue3-dnd";
  import { getWidgetAccept } from "@/modle";
  import Widget from "../index.vue";
  import EmptyTemplate from "../../EmptyTemplate/index.vue";

  const props = defineProps<{ schema: schema }>();
  const stores = useLowCodeStore();
  const schemas = computed(()=> stores.schemas.filter(t=>t.parentId === props.schema.id));
  const rootRef = ref<HTMLDivElement>()
  const [dropProps, drop] = useDrop(() => ({
    accept: getWidgetAccept('box'),
    drop: (item,monitor)=>{
      const didDrop = monitor.didDrop();
      if (didDrop) return;
      console.log(props.schema.id)
    },
    collect: monitor => ({
      isOver: monitor.isOver(),
      isOverCurrent: monitor.isOver({ shallow: true }),
    }),
  }))
  const [{ value: {isDragging} }, drag] = useDrag({
    type: 'box',
    item: {...props.schema},
    collect: (monitor: any) => ({
      isDragging: monitor.isDragging(),
    }),
  })
  const { isOverCurrent, isOver } = toRefs(dropProps)
  const setRef = (el: HTMLDivElement) => {
    rootRef.value = drag(drop(el)) as HTMLDivElement
  }

</script>

<style scoped lang="less">
  .hit {
    background-color: var(--vt-c-focus) !important;
    opacity: 0.5;
  }
</style>
